<template>
  <div class="auth-root">
    <div class="auth-container">
      <v-card outlined>
        <div class="auth-content" v-if="getApplyStatus === -1 || getApplyStatus === 0">
          <h1>申请认证</h1>
          <br />
          <v-textarea v-model="reason" full-width outlined>
            <template v-slot:prepend>
              <h2>申请原因</h2>
            </template>
          </v-textarea>
          <v-text-field v-model="contact" full-width outlined>
            <template v-slot:prepend>
              <h2>联系方式</h2>
            </template>
          </v-text-field>
          <v-text-field v-model="unit" full-width outlined>
            <template v-slot:prepend>
              <h2>所属单位</h2>
            </template>
          </v-text-field>
          <v-btn color="red" dark rounded x-large @click="apply">申请 </v-btn>
        </div>
        <div v-if="getApplyStatus === 1" class="auth-content">
         <h1> 您的申请正在审核</h1>
        </div>
        <div v-if="getApplyStatus === 2" class="auth-content">
           <h1> 您的申请已通过</h1>
        </div>
      </v-card>
    </div>
  </div>
</template>
<script>
import { rules } from "@/utils/validatingRules/validating-rules";

export default {
  name: "Login",
  data() {
    return {
      rules,
      reason: "",
      contact: "",
      unit: "",
    };
  },
  computed:{
    getApplyStatus(){
      console.log(this.$store.getters.getUser)
      return this.$store.getters.getApplyStatus;
      // return 2;
    }
  },
  methods: {
    apply() {
      if (
        rules.required(this.reason) != true ||
        rules.required(this.contact) != true ||
        rules.required(this.unit) != true
      ) {
        this.$Message.error("请完整填写认证信息");
        return;
      }

      this.$api.common
        .applyAuth({
          id: this.$store.getters.getUserId,
          reason: this.reason,
          organization:this.unit,
          contact:this.contact
        })
        .then((res) => {
          let result = res;
          if (result.success === true) {
            this.$store.commit("setApplyStatus",1);
            this.$Message.success("申请成功");
          } else {
            this.$Message.error("申请失败，原因：" + res.exc);
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$Message.error("申请失败,出现了意料之外的错误");
        });
    },
  },
};
</script>
<style scoped>
.auth-root {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.auth-container {
  margin-top: 25vh;

  width: 50vw;
}
.auth-content {
  /* width:30vh; */
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
/deep/ .v-input {
  min-width: 100% !important;
  max-width: 100% !important;
}
h2 {
  white-space: nowrap;
}
</style>
